<template>
	<mg-modal :ismr="true" v-model="show" :width="type==1?'700rpx':'670rpx'" :z-index="3000">
		<view v-if="type==1" class="">
			<view @click="ljck" class="tctop posi-r">
				<view v-if="co.couponInfo" class="tcimg">
					<mg-img :src="co.icon||`${onImgurl}/img/yhqbg.png`"></mg-img>
				</view>
				<view v-if="co.couponInfo" class="posi-a tctopbd f-col">
					<view class="f-g-0 tctopbdt t-c">
						<view class="f34 wei tcc1">{{co.name}}</view>
						<view class="f20 tcc2 mt10">优惠券已放入您的账户中</view>
					</view>
					<scroll-view class="f-g-1 tctopbdb o-h">
						<view v-for="(v,i) in co.couponInfo" :key='i' class='mb20'>
							<mg-coupon ptype="5" :color='color' cname='' :co='v'></mg-coupon>
						</view>
					</scroll-view>
				</view>
				<view v-if="!co.icon" @click="ljck" class="posi-a tctopft f-c f32 wei">立即查看</view>
			</view>
			<view @click="$emit('input', false)" class="tcbtm f-c"><text class="iconfont iconcuo cf f60"></text></view>
		</view>
		<block v-else-if="type==2&&co.coupon&&co.coupon.length">
			<view class="tctop posi-r">
				<view class="tcimg2">
					<mg-img :src="co.activity.bgimg||`${onImgurl}/img/yhqbg.png`"></mg-img>
				</view>
				<view class="posi-a tctopbd2 f-col">
					<scroll-view scroll-y class="f-g-1 tctopbd2b o-h">
						<view v-for="(v,i) in co.coupon" :key='i' class='mb20'>
							<mg-coupon ptype="8" :color='color' cname='' :co='v'></mg-coupon>
						</view>
					</scroll-view>
				</view>
			</view>
			<view @click="$emit('input', false)" class="tcbtm2 f-c"><text class="iconfont iconcuo cf f60"></text></view>
		</block>
	</mg-modal>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	import mgModal from '@/components/common/modal.vue'
	import mgCoupon from '@/components/common/mg-coupon.vue'
	export default {
		name: 'searchBox',
		components: {
			mgModal,
			mgCoupon,
		},
		props: {
			co: {
				type: Object,
				default: function() {
					return {}
				}
			},
			value: {
				type: Boolean,
				default: false
			},
			color: {
				type: String,
				default: ''
			},
			type: {
				type: String,
				default: '1'
			},
		},
		data() {
			return {
				list: []
			}
		},
		computed: {
			show: {
				get() {
					return this.value;
				},
				set(newVal) {
					this.$emit("input", newVal)
				}
			},
		},
		methods: {
			ljck() {
				this.$emit('close')
				setTimeout(() => {
					this.go({
						t: 1,
						url: '/yb_o2o/my/coupon/my'
					})
				}, 100)
			}
		},
	}
</script>

<style scoped lang="scss">
	.tctop {}

	.tcimg {
		width: 100%;
		height: 857rpx;
	}

	.tctopbd,
	.tctopft {
		width: 551rpx;
		height: 530rpx;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		// background: #fff;
	}

	.tctopft {
		width: 480rpx;
		height: 96rpx;
		top: 648rpx;
		color: #fff;
		// font-family: MicrosoftYaHei-Bold;
	}

	.tctopbdt {
		padding: 50rpx 30rpx 10rpx;
	}

	.tctopbdb {
		padding: 10rpx 20rpx 0;
		// overflow-y: scroll;
	}

	.tcc1 {
		background: linear-gradient(45deg, #FF6B12, #EF2F1F);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		color: transparent;
	}

	.tcc2 {
		color: #EF301F;
	}

	.tcbtm {
		margin-top: 10rpx;
	}

	/*2*/
	.tcimg2 {
		width: 100%;
		height: 870rpx;
	}

	.tctopbd2 {
		width: 100%;
		height: 600rpx;
		top: 228rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.tctopbd2b {
		padding: 25rpx 40rpx 0;
		// overflow-y: scroll;
	}

	.tcbtm2 {
		margin-top: 30rpx;
	}
</style>
